<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>循环结构</title>
	</head>
	<body>
		<div id="app">
			<!-- 
							1.什么时候使用循环
								多次重复的执行同一个操作.
							2.什么数据使用循环
								1.数组
								2.对象
								3.数组套对象(集合)
						 -->
						 
						 <!--
								1. 遍历数据 将数组中的数据在页面中展现
						  -->
						 <p v-for="item in array" v-text="item">
							<!-- {{item}} -->
						 </p>
						 
						 <!-- 2. 获取下标 
							  语法: v-for="(遍历的元素,遍历的下标) in array"
						  -->
						 <p v-for="(item,index) in array">
								下标:{{index}}~~~产品(数据值):{{item}}
						 </p>
						 <!-- 2.遍历对象 -->
						 <p v-for="(key,vlaue,index) in user">{{index}}~~~{{key}}~~~{{vlaue}}</p>
						 <!-- 3.遍历集合 -->
						 <div v-for="user in userList">
							 ID:{{user.id}}~
							 name:{{user.name}}~
							 age:{{user.age}}~
							 <p v-for="(value,key,index) in user">
							 {{index}}~~~{{key}}~~~{{vlaue}}</p>
							 <!-- p标签不能嵌套，div可以，或者div加上p -->
						 </div>
						 <!-- 总结：
						  1.如果遍历数组 参数（value，index）
						  2.如果遍历对象 参数（value,key,index）
						  特点：遍历数据在页面中展现-->
		</div>
		<script src="../js/vue.js" ></script>
		<script >
			const APP=new Vue({
				el: "#app",
				data: {
					array: ["Kirin9000","Qualcomm888","M1"],
					user: {
						id: 100,
						name: "tomcat",
						age: 18,
					},
					userList: [{
						id: 200,
						name: "tomcat",
						age: 28,
					},
					{
					id: 400,
					name: "tomcat",
					age: 88,	
					},
					]
				}
			})
		</script>
	</body>
</html>
